<!DOCTYPE html>
<style>
    input, textarea {
        height: 8px;
    }
    .placeholder-shown {
        background-color: green;
    }
</style>
<p>This test checks how various input elements are styled when :placeholder-shown is applied.</p>
<div>
    <textarea></textarea>
    <textarea placeholder></textarea>
    <textarea placeholder="Placeholder text" class="placeholder-shown"></textarea>
    <textarea placeholder="Placeholder text">Foobar</textarea>
</div>
<div>
    <input>
    <input placeholder>
    <input placeholder="Placeholder text" class="placeholder-shown">
    <input placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="">
    <input type="" placeholder>
    <input type="" placeholder="Placeholder text" class="placeholder-shown">
    <input type="" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="hidden">
    <input type="hidden" placeholder>
    <input type="hidden" placeholder="Placeholder text" class="placeholder-shown">
    <input type="hidden" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="text">
    <input type="text" placeholder>
    <input type="text" placeholder="Placeholder text" class="placeholder-shown">
    <input type="text" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="tel">
    <input type="tel" placeholder>
    <input type="tel" placeholder="Placeholder text" class="placeholder-shown">
    <input type="tel" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="url">
    <input type="url" placeholder>
    <input type="url" placeholder="Placeholder text" class="placeholder-shown">
    <input type="url" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="email">
    <input type="email" placeholder>
    <input type="email" placeholder="Placeholder text" class="placeholder-shown">
    <input type="email" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="password">
    <input type="password" placeholder>
    <input type="password" placeholder="Placeholder text" class="placeholder-shown">
    <input type="password" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="search">
    <input type="search" placeholder>
    <input type="search" placeholder="Placeholder text" class="placeholder-shown">
    <input type="search" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="date">
    <input type="date" placeholder>
    <input type="date" placeholder="Placeholder text">
    <input type="date" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="month">
    <input type="month" placeholder>
    <input type="month" placeholder="Placeholder text">
    <input type="month" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="week">
    <input type="week" placeholder>
    <input type="week" placeholder="Placeholder text">
    <input type="week" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="time">
    <input type="time" placeholder>
    <input type="time" placeholder="Placeholder text">
    <input type="time" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="datetime-local">
    <input type="datetime-local" placeholder>
    <input type="datetime-local" placeholder="Placeholder text">
    <input type="datetime-local" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="number">
    <input type="number" placeholder>
    <input type="number" placeholder="Placeholder text" class="placeholder-shown">
    <input type="number" placeholder="Placeholder text" value="0">
</div>
<div>
    <input type="range">
    <input type="range" placeholder>
    <input type="range" placeholder="Placeholder text">
    <input type="range" placeholder="Placeholder text" value="1">
</div>
<div>
    <input type="checkbox">
    <input type="checkbox" placeholder>
    <input type="checkbox" placeholder="Placeholder text">
    <input type="checkbox" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="radio">
    <input type="radio" placeholder>
    <input type="radio" placeholder="Placeholder text">
    <input type="radio" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="file">
    <input type="file" placeholder>
    <input type="file" placeholder="Placeholder text">
    <input type="file" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="submit">
    <input type="submit" placeholder>
    <input type="submit" placeholder="Placeholder text">
    <input type="submit" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="image">
    <input type="image" placeholder>
    <input type="image" placeholder="Placeholder text">
    <input type="image" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="reset">
    <input type="reset" placeholder>
    <input type="reset" placeholder="Placeholder text">
    <input type="reset" placeholder="Placeholder text" value="Foobar">
</div>
<div>
    <input type="color">
    <input type="color" placeholder>
    <input type="color" placeholder="Placeholder text">
    <input type="color" placeholder="Placeholder text" value="Foobar">
</div>
